import React, { useEffect, useState } from "react";
import { Card, Form, Row, Col, Space, Input } from "antd";
import XlRadio from "@/components/Form/XlRadio";
import XlChannelCardList from "@/components/Table/XlChannelCardList";
import { lineQuoteTypes } from "@/constants/types";
import { queryLineQuote } from "../../services";

const { Item } = Form;
const labelCol = {span: 6};

const ProductInfo = ({form, getDict, sendInfoForm, isPreOrderConvertOrder}: any) => {
  const prdTypes = getDict('prdType');
  const deliveryMethods = getDict('deliveryMethod');

  const [quoteList, setQuoteList] = useState<lineQuoteTypes []>([]);

  const destType = Form.useWatch('destType', sendInfoForm);
  const destCode = Form.useWatch('destCode', sendInfoForm);
  const country = Form.useWatch('country', sendInfoForm);
  const product = Form.useWatch('product', form);
  const deliveryMethod = Form.useWatch('deliveryMethod', form);
  const quoteId = Form.useWatch('quoteId', form);

  
  useEffect(() => {
    if (destType && destCode && country && product && deliveryMethod) {
      queryLineQuote({destType, destCode, country, product, deliveryMethod}).then(
        res => {
          const arr = res || [];
          setQuoteList(arr);
          if (arr?.length === 1) {
            form.setFieldValue('quoteId', arr?.[0]?.id);
          }
        }
      )
    }
    // form.setFieldValue('quoteId', undefined);
  }, [destType, destCode, country, product, deliveryMethod]);

  useEffect(() => {
    const channel = quoteList?.find(quote => quote.id === quoteId);
    form.setFieldsValue({
      cwhName: channel?.cwhName,
      shipNames: channel?.shipNames,
      batchTime: channel?.batchTime,
      dportCode: channel?.dportCode,
      dportName: channel?.dportName,
      sportCode: channel?.sportCode,
      sportName: channel?.sportName,
      week: channel?.week,
    });
  }, [quoteId, JSON.stringify(quoteList)])

  return (
    <Card title="渠道/产品" className="mt15">
      <Form form={form} labelCol={labelCol}>
        <Row>
          <Col span={12}>
            <Item label="渠道/产品" name="product" rules={[{required: true, message: '请选择渠道/产品'}]}>
              <XlRadio.ButtonRadioGutterGroup onChange={() => form.setFieldValue('quoteId', undefined)} options={prdTypes} />
            </Item>
          </Col>
          <Col span={12}>
            <Item label="派送方式" name="deliveryMethod" rules={[{required: true, message: '请选择派送方式'}]}>
              <XlRadio.ButtonRadioGutterGroup onChange={() => form.setFieldValue('quoteId', undefined)} options={deliveryMethods} />
            </Item>
          </Col>
        </Row>
        <Item noStyle name="quoteId">
          <XlChannelCardList list={quoteList} />
        </Item>
        <Item noStyle hidden name="dportCode">
          <Input />
        </Item>
        <Item noStyle hidden name="shipNames">
          <Input />
        </Item>
        <Item noStyle hidden name="batchTime">
          <Input />
        </Item>
        <Item noStyle hidden name="dportName">
          <Input />
        </Item>
        <Item noStyle hidden name="sportCode">
          <Input />
        </Item>
        <Item noStyle hidden name="sportName">
          <Input />
        </Item>
        <Item noStyle hidden name="cwhName">
          <Input />
        </Item>
        <Item noStyle hidden name="week">
          <Input />
        </Item>
      </Form>
    </Card>
  );
}
export default ProductInfo;